<template>
    <!--居民消费价格指数-->
    <div class="consumer-price">
        <div class="topBox">
            <el-row>
                <el-col span="12">
                    <div style="margin:0 .5vw">
                        <chart-block chartID="chart1" :title="BlockLineOptionData.title" :optionData="BlockLineOptionData" chartType="getShadowLine" height="37vh" style="padding:0 1vh 2vh 0;margin-top:1vh" titleType="blueBig"></chart-block>
                    </div>
                </el-col>
                <el-col span="12">
                    <div style="margin:0 .5vw">
                        <chart-block chartID="chart2" :title="MultiColumnBarOptionData.title" :optionData="MultiColumnBarOptionData" chartType="getMultiColumnBar" height="37vh" style="padding:0 1vh 2vh 0;margin-top:1vh;" titleType="moreBlueBig"></chart-block>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="bottomBox">
            <el-col span="12">
                <div style="margin:0 .5vw">
                    <chart-block chartID="chart3" :title="pictorialBarOptionData.title" :optionData="pictorialBarOptionData" chartType="getSingleLine" height="44.5vh" style="padding:0 1vh 1vh 0" titleType="blueBig"></chart-block>
                </div>
            </el-col>
            <el-col span="12">
                <div style="margin:0 .5vw">
                    <chart-block chartID="chart4" :title="MultiColumnBarOptionData1.title" :optionData="MultiColumnBarOptionData1" chartType="getMultiColumnBar" height="44.5vh" style="padding:0 1vh 1vh 0" titleType="moreBlueBig"></chart-block>

                </div>
            </el-col>
        </div>
    </div>
</template>

<script>
import { getConsumeData, getConsumeData1, getConsumeData2, getConsumeData3 } from '@/api/pages.js'
export default {
    name: "consumer-price",
    components: {
        ChartBlock: () => import('@/components/chart-block')
    },
    props: {},
    data() {
        return {
            InfeedBarOptionData: {

            },
            MultiColumnBarOptionData: {
                seriesData: [
                    {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    }, {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    }, {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    }, {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    },
                ],
            },
            BlockLineOptionData: {
                LinearGradientColor: [//柱状渐变颜色
                    {
                        topColor: 'rgba(0,88,255,0.8)',
                        bottomColor: 'rgba(0,88,255,0.1)',
                        LineCircleColor: "#0058FF",//折线图颜色
                        LineCircleBorderColor: "#00eaff",//折线图描边颜色
                    },
                    {
                        topColor: 'rgba(211,89,0,0.8)',
                        bottomColor: 'rgba(211,89,0,0.1)',
                        LineCircleColor: "#D35900",//折线图颜色
                        LineCircleBorderColor: "#F28E26",//折线图描边颜色
                    }
                ],
                seriesData: [
                    {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    },
                ],
                // seriesData: [
                // 	{
                // 		name: '', //如果有图例，这个就不能为空
                // 		data: [], //数据
                // 		unit: '', //数据的单位
                // 	},
                // ],
                // LinearGradientColor:[//柱状图渐变色
                // 	{
                // 		topColor:'#4760FF',
                // 		bottomColor:'#0DCCFF'
                // 	},
                // ],
            },
            pictorialBarOptionData: {
                seriesData: [
                    {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    }, {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    },
                ],
                LinearGradientColor: [//渐变色
                    { //折线图两侧竖线数据渐变色
                        topColor: "rgba(92, 210, 254,1)",
                        bottomColor: "rgba(92, 210, 254, 0)"
                    },
                    {//折线图填充区域渐变色
                        topColor: "rgba(105, 209, 239,.2)",
                        bottomColor: "rgba(105, 209, 239, 0)"
                    },
                ],
                LineCircleColor: "#14d0e1",//折线图颜色
                LineCircleBorderColor: "#14d0e1",//折线图描边颜色
                min: ""
                // LinearGradientColor: [//柱状图渐变色
                //     {
                //         topColor: '#FE684D',
                //         bottomColor: '#FFC23A'
                //     },
                // ],
            },
            MultiColumnBarOptionData1: {
                seriesData: [
                    {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    }, {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    }, {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    }, {
                        name: '', //如果有图例，这个就不能为空
                        data: [], //数据
                        unit: '', //数据的单位
                    },
                ],
            }
        }
    },
    computed: {},
    created() {

    },
    mounted() {
        this.getConsumeData('E051')
        this.getConsumeData1('E054')
        this.getConsumeData2('E052')
        this.getConsumeData3('E053')
    },
    methods: {
        // 经济指标挖掘分析-居民消费价格指数-居民消费价格指数变化
        getConsumeData(busiCode) {
            getConsumeData(busiCode).then(res => {
                if (res.data.code == 200) {
                    var datas = res.data.data.seriesData[0].data
                    // var maxData = []
                    // datas.forEach((item,index,arr)=>{
                    // 	item.value.forEach((it,ins,arr1)=>{
                    // 		maxData.push(it)
                    // 	})
                    // })
                    this.BlockLineOptionData = {
                        title: res.data.data.title,
                        categoryAxis: res.data.data.categoryAxis, //类目轴数据
                        seriesData: res.data.data.seriesData,
                        smooth: true,
                        legendShow: 'no',
                        LinearGradientColor: [//柱状渐变颜色
                            // {
                            //     topColor: 'rgba(0,88,255,0.8)',
                            //     bottomColor: 'rgba(0,88,255,0.1)',
                            //     LineCircleColor: "#0058FF",//折线图颜色
                            //     LineCircleBorderColor: "#00eaff",//折线图描边颜色
                            // },
                            {
                                topColor: 'rgba(211,89,0,0.8)',
                                bottomColor: 'rgba(211,89,0,0.1)',
                                LineCircleColor: "#D35900",//折线图颜色
                                LineCircleBorderColor: "#F28E26",//折线图描边颜色
                            }
                        ],
                        min: Math.floor(Math.min(...datas))//最小值
                    }
                }
            }).catch(err => {

            })
        },
        // 经济指标挖掘分析-居民消费价格指数-居民消费价格指数分布
        getConsumeData1(busiCode) {
            getConsumeData1(busiCode).then(res => {
                if (res.data.code == 200) {
                    var datas = res.data.data.seriesData[0].data
                    var maxData = []
                    datas.forEach((item, index, arr) => {
                        item.value.forEach((it, ins, arr1) => {
                            maxData.push(it)
                        })
                    })
                    this.MultiColumnBarOptionData = {
                        title: res.data.data.title,
                        leftColor: '#C659FF',
                        rightColor: '#6E82FF',
                        seriesData: res.data.data.seriesData[0].data,
                        rows: 2,//行数
                        max: Math.max(...maxData),//最大值
                        min: Math.min(...maxData),//最大值
                        borderWidth: 7,//border宽
                    }
                }
            }).catch(err => {

            })
        },
        // 经济指标挖掘分析-居民消费价格指数-商品零售价格指数变化
        getConsumeData2(busiCode) {
            getConsumeData2(busiCode).then(res => {
                if (res.data.code == 200) {
                    // var datas = res.data.data.seriesData[0].data
                    // this.pictorialBarOptionData = {
                    //     title: res.data.data.title,
                    //     categoryAxis: res.data.data.categoryAxis, //类目轴数据
                    //     seriesData: res.data.data.seriesData,
                    //     LinearGradientColor: [//柱状图渐变色
                    //         {
                    //             topColor: '#FE684D',
                    //             bottomColor: '#FFC23A'
                    //         },
                    //     ],
                    //     min: Math.floor(Math.min(...datas))//最小值
                    // }
                    let datas = res.data.data.seriesData[0].data
                    let lineData = new Array(datas.length)
                    for (let i = 0; i < lineData.length; i++) {
                        if (i === 0) {
                            lineData[0] = datas[0]
                        } else if (i === lineData.length - 1) {
                            lineData[lineData.length - 1] = datas[lineData.length - 1]
                        } else {
                            lineData[i] = 0
                        }
                    }
                    this.pictorialBarOptionData.title = res.data.data.title
                    this.pictorialBarOptionData.categoryAxis = res.data.data.categoryAxis //类目轴数据
                    this.pictorialBarOptionData.seriesData = [
                        {
                            data: lineData,//折线图两侧竖线数据
                        },
                        res.data.data.seriesData[0]
                    ]
                    this.pictorialBarOptionData.min = Math.floor(Math.min(...datas))//最小值
                }

            }).catch(err => {

            })
        },
        // 经济指标挖掘分析-居民消费价格指数-石河子市商品零售价格指数分布
        getConsumeData3(busiCode) {
            getConsumeData3(busiCode).then(res => {
                if (res.data.code == 200) {
                    var datas = res.data.data.seriesData[0].data
                    var maxData = []
                    datas.forEach((item, index, arr) => {
                        item.value.forEach((it, ins, arr1) => {
                            maxData.push(it)
                        })
                    })
                    this.MultiColumnBarOptionData1 = {
                        title: res.data.data.title,
                        leftColor: '#FE684D',
                        rightColor: '#FFC23A',
                        seriesData: res.data.data.seriesData[0].data,
                        rows: 4,
                        max: Math.max(...maxData),
                        min: Math.min(...maxData),//最大值
                        borderWidth: 7,//border宽
                    }
                }
            }).catch(err => {

            })
        },
    },
    watch: {}
}
</script>

<style scoped lang="scss">
.consumer-price {
    width: 100%;
    height: 100%;
    .topBox {
        width: 100%;
        height: 45%;
    }
    .bottomBox {
        width: 100%;
        height: 54%;
        margin-top: 2vh;
    }
}
</style>
